<template>
  <el-container class="guide-container1">
    <!-- 头部 -->
    <el-header>
      <div class="logo">
        <img src="../../assets/bank.png" alt="" style="margin-left: 5px" />
        <!-- <span>银行产品秒杀系统</span> -->
      </div>

      <div class="person" @click="logout">
        <span>{{ name }}</span>
        <el-tooltip
          class="item"
          effect="dark"
          content="点击退出登录"
          placement="bottom-end"
        >
          <el-avatar
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp72610038.jpg&refer=http%3A%2F%2Fimg1.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642742770&t=fbe517087dd40c5bccce290142d43ba6"
          ></el-avatar>
        </el-tooltip>
      </div>
    </el-header>
    <el-container class="guide-container2">
      <!-- 侧边栏 -->
      <el-aside width="245px">
        <el-menu
          default-active="guide"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          style="border-right: none"
          router
        >
          <!-- 首页 -->
          <el-menu-item index="guide">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <!-- 秒杀活动 -->
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-bell"></i>
              <span>秒杀活动</span>
            </template>
            <el-menu-item index="manage">创建产品</el-menu-item>
            <el-menu-item index="detail">活动详情</el-menu-item>
            <el-menu-item index="all">已结束活动</el-menu-item>
          </el-submenu>
          <!-- 审核 -->
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-document-checked"></i>
              <span>活动审核</span>
            </template>
            <el-menu-item index="auditing">审核活动</el-menu-item>
            <el-menu-item index="allauditing">已通过审核</el-menu-item>
            <el-menu-item index="backauditing">已驳回审核</el-menu-item>
          </el-submenu>
          <!-- 规则 -->
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>初筛规则</span>
            </template>
            <el-menu-item index="changeRules">配置规则</el-menu-item>
            <el-menu-item index="screen">查看规则</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 主体 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      name: "",
    };
  },
  created() {
    this.getName();
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    getName() {
      this.name = this.$root.ADMIN.admin_name;
    },
    logout(){
      window.sessionStorage.clear()
      this.$router.replace('/login')
    }
  },
};
</script>

<style>
.guide-container1 {
  height: 100vh;
}
/* .guide-container2 {
  height: 100vh;
} */
.el-header {
  background-color: white;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  width: 245px;
  height: 100%;
  display: flex;
  align-items: center;
  background-color: #545c64;
  margin-left: -20px;
}
.logo span {
  font-size: 18px;
  margin-left: 15px;
  color: white;
}
.person {
  display: flex;
  align-items: center;
}
.person span {
  font-size: 14px;
  margin-left: 15px;
}
.el-aside {
  background-color: #545c64;
  color: #333;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}
</style>